<template>
	<el-dialog v-model="dialog" :title="state.form.id ? '修改商品类目' : '新增商品类目'" width="60%" :before-close="handleClose">
		<el-form ref="formRef" :model="state.form" label-width="140px" :rules="state.rules">
			<el-card class="box-card">
				<template #header>
					<div class="card-header">
						<span>类目信息</span>
					</div>
				</template>
				<el-form-item label="店铺" prop="shopId">
					<select-shop
						ref="selectShopRef"
						:disabled="!!state.form.id"
						:defaultShop="false"
						v-model="state.form.shopId"
						@change="shopChange"
					></select-shop>
				</el-form-item>
				<el-form-item label="类目名称" prop="name">
					<el-input v-model="state.form.name" maxlength="20" show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="上级类目" prop="parentId" v-if="state.form.shopId">
					<el-tree-select
						style="width: 100%"
						v-model="state.form.parentId"
						:data="state.categoryTree"
						check-strictly
						:props="defaultProps"
						:render-after-expand="false"
						node-key="id"
					></el-tree-select>
				</el-form-item>
				<el-form-item label="类目描述" prop="description">
					<el-input v-model="state.form.description"></el-input>
				</el-form-item>
				<el-form-item label="排序序号" prop="sort">
					<el-input-number style="width: 100%" v-model="state.form.sort" :min="0" :max="99999" controls-position="right" />
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-radio-group v-model="state.form.status">
						<el-radio v-for="item in status" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-card>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleClose">关 闭</el-button>
				<el-button type="primary" :loading="loading" @click="submitForm(formRef)">确 认</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script lang="ts" setup>
import { defineAsyncComponent, ref, reactive } from 'vue';
import { addObj, editObj, getById, getList } from '/@/api/product/goodsshopcategory';
import { ElMessage, FormInstance } from 'element-plus';
import { useDict } from '/@/utils/dict';

const SelectShop = defineAsyncComponent(() => import('/@/components/selectShop/index.vue'));
interface DataState {
	form: {
		id: string | undefined;
		name: string;
		parentId: string;
		status: string;
		description: string;
		sort: number;
		shopId: string;
	};
	rules: any;
	categoryTree: any;
}
const emit = defineEmits(['initPage']);
// 字典
const { status } = useDict('status');
const state = reactive<DataState>({
	form: {
		id: undefined,
		name: '',
		parentId: '',
		status: '0',
		description: '',
		sort: 0,
		shopId: '',
	},
	rules: {
		name: [
			{
				required: true,
				message: '请输入类目名称',
				trigger: 'change',
			},
		],
		parentId: [
			{
				required: true,
				message: '请输入上级类目',
				trigger: 'change',
			},
		],
		status: [
			{
				required: true,
				message: '请选择状态',
				trigger: 'change',
			},
		],
		sort: [
			{
				required: true,
				message: '请输入排序序号',
				trigger: 'change',
			},
		],
		shopId: [
			{
				required: true,
				message: '请选择店铺',
				trigger: 'change',
			},
		],
	},
	categoryTree: [],
});
const dialog = ref(false);
const loading = ref(false);
const formRef = ref();
const defaultProps = {
	children: 'children',
	label: 'name',
};
const initForm = (row: any) => {
	if (row && row.id) {
		getDetail(row.id);
	}
	dialog.value = true;
};
const getDetail = (id: string) => {
	loading.value = true;
	// 修改
	getById(id)
		.then((response: any) => {
			loading.value = false;
			state.form = response.data.data;
		})
		.catch(() => {
			loading.value = false;
		});
};
/**
 * 关闭事件
 */
const handleClose = () => {
	resetForm(formRef.value);
};
/**
 * 重置表单
 */
const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	state.form.id = undefined;
	loading.value = false;
	dialog.value = false;
	formEl.resetFields();
};
/**
 * 提交按钮
 */
const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid, fields) => {
		if (valid) {
			loading.value = true;
			if (state.form.id) {
				//修改
				edit();
			} else {
				//新增
				add();
			}
		}
	});
};
/**
 * 新增
 */
const add = () => {
	addObj(state.form)
		.then((response) => {
			resetForm(formRef.value);
			ElMessage.success('新增成功');
			emit('initPage');
		})
		.catch(() => {
			loading.value = false;
		});
};
/**
 * 修改
 */
const edit = () => {
	editObj(state.form)
		.then((response) => {
			resetForm(formRef.value);
			ElMessage.success('修改成功');
			emit('initPage');
		})
		.catch(() => {
			loading.value = false;
		});
};
// 获取类目
const getCategoryTree = () => {
	getList({ shopId: state.form.shopId }).then((response) => {
		const category = {
			id: '0',
			name: '顶级菜单',
			children: [],
		};
		const categoryList = response.data.data;
		if (categoryList) {
			categoryList.unshift(category);
			state.categoryTree = categoryList;
		} else {
			state.categoryTree = [category];
		}
	});
};
const shopChange = () => {
	getCategoryTree();
};
defineExpose({
	initForm,
});
</script>
